<template>
  <div id="PerProcess">
    <div class="ge" v-show="!spinner"></div>
    <div class="spinner" v-show="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>      
    <div class="contentTwo-head">
        <div>
            <div class="contentTwo-left"><span></span></div>
            <div class="contentTwo-right">               
                <span>{{$route.query['ACTDEF_NAME']}}</span>
            </div>
            <br />
        </div>
        <div class="contentTwo-name"><span class="contentTwo-text">{{FinanceProinstList.ACCEPT_NAME}}</span></div>
        <div>
            <div class="lie-left">流程名称：</div>
            <div class="lie_right">{{FinanceProinstList.ACCEPT_TYPE | acceptState}}</div>
            <br />
        </div>
        <div>
            <div class="lie-left">申请人员：</div>
            <div class="lie_right">{{FinanceProinstList.STAFF_NAME}}</div>
            <br />
        </div>         				
        <div>
            <div class="lie-left">申请时间：</div>
            <div class="lie_right">{{FinanceProinstList.FINANCEPROINST_CREATEDATE}}</div>
            <br />
        </div>
        <div>
            <div class="lie-left">备注：</div>
            <div class="lie_right">{{FinanceProinstList.FINANCEPROINST_DESC}}</div>
            <br />
        </div>	
        <div v-show="isExamine" class="to-examine" @click="passOrReject('reject')">
            <img src="../../../../static/img/BusinessSub/ddsh.png" width="20%" /> 
            <span>驳回</span>
        </div>
        <div v-show="isExamine" class="to-examine" @click="passOrReject('pass')">
            <img src="../../../../static/img/BusinessSub/ddsh.png" width="20%" /> 
            <span>审核</span>
        </div>
        <div v-show="isExamine" class="to-examine" @click="passOrReject('transfer')">
            <img src="../../../../static/img/BusinessSub/ddsh.png" width="20%" /> 
            <span>移交</span>
        </div>
        <br />
    </div>
    <div class="contentTwo-head">
        <h2>报销详情</h2>
        <div>
            <div class="lie-left">报销部门：</div>
            <div class="lie_right">{{ExpenseBill.DEPARTMENT_NAME}}</div>
            <br />
        </div>
        <div>
            <div class="lie-left">出差人员：</div>
            <div class="lie_right">{{ExpenseBill.BUSINESS_PERSON}}</div>
            <br />
        </div>
        <div>
            <div class="lie-left">出差事由：</div>
            <div class="lie_right pFont">{{ExpenseBill.BUSINESS_REASON}}</div>
            <br />
        </div>
    </div>
    <div class="contentTwo-head">
        <h2>报销费用</h2>        
        <div>
            <div class="lie-left">合计金额：</div>
            <div class="lie_right price">{{ExpenseBill.PAYMENT_LOWER}}</div>
            <br />
        </div>
         <div>
            <div class="lie-left">大写金额：</div>
            <div class="lie_right">{{ExpenseBill.PAYMENT_CAP}}</div>
            <br />
        </div>
         <div>
            <div class="lie-left">入账类型：</div>
            <div class="lie_right">{{ExpenseBill.EXPENDBILL_TYPE === "1000" ? '公务卡' : '工资卡'}}</div>
            <br />
        </div>
         <div>
            <div class="lie-left" style="width:37%">是否使用电子发票：</div>
            <div class="lie_right" style="width:63%">{{ExpenseBill.ELECTRONIC_INVOICE === 1 ? '是' : '否'}}</div>
            <br />
        </div>
         <div v-if="ExpenseBill.ELECTRONIC_INVOICE === 1">
            <div class="lie-left">发票号码：</div>
            <div class="lie_right price">{{ExpenseBill.BILLCODE}}</div>
            <br />
        </div>
        <div v-show="ImageList.length > 0" class="attachment">
            <p>附件:</p>
              <div class="imgBox">
                <img v-for="(arr,i) in ImageList" :key="i" :src="arr" @click="exhibitionImgFunc(arr)">
              </div>
        </div>
    </div>
    <div class="contentTwo-head" v-for="(item,index) in ExpenseDetail" :key="item.EXPENSEDETAIL_ID">
        <div class="expenseDetail" v-bind:class="{isOpen:item.show,isClose:!item.show}">
            <h3>报销明细{{index+1}}</h3>
            <hr />
            <div>
                <div class="lie-left">出发时间：</div>
                <div class="lie_right">{{item.START_DATE | cutDate}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">出发地点：</div>
                <div class="lie_right">{{item.START_PLACE}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">到达时间：</div>
                <div class="lie_right">{{item.ARRIVE_DATE | cutDate}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">到达地点：</div>
                <div class="lie_right">{{item.ARRIVE_PLACE}}</div>
                <br />
            </div>
            <hr />
            <div>
                <div class="lie-left">交通工具：</div>
                <div class="lie_right">{{item.VEHICLE_TYPE}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">单据张数：</div>
                <div class="lie_right">{{item.BILL_COUNT}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">交通金额：</div>
                <div class="lie_right price">{{item.BILL_AMOUNT}}</div>
                <br />
            </div>
            <hr />
            <div>
                <div class="lie-left">补贴人数：</div>
                <div class="lie_right">{{item.SUBSIDY_POPULATION}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">补贴天数：</div>
                <div class="lie_right">{{item.SUBSIDY_DAY}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">补贴标准：</div>
                <div class="lie_right">{{item.URBAN_TRAFFIC_ALLOWANCE}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left">补贴金额：</div>
                <div class="lie_right price">{{item.SUBSIDY_AMOUNT}}</div>
                <br />
            </div>
            <hr />
            <div>
                <div class="lie-left">其他费用：</div>
                <div class="lie_right">{{item.OTHER_COST}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left" style="width:37%">其他费用单据张数：</div>
                <div class="lie_right" style="width:63%">{{item.OTHERBILL_COUNT}}</div>
                <br />
            </div>
            <div>
                <div class="lie-left" style="width:28%">其他费用金额：</div>
                <div class="lie_right price" style="width:72%">{{item.OTHERBILL_AMOUNT}}</div>
                <br />
            </div>
            <span class="financial-reimbursement-iconfont financial-reimbursement-jiantou8 jiantou" @click="showTravelDetails(index)" v-bind:class="{rotate:item.show}"></span>
        </div>
    </div>
    <div class="contentTwo-head">
        <h2 v-if="ApproveList.length > 0">审批意见</h2>              
        <div class="process" v-for="(item,i) in ApproveList" :key="i" v-show="i<2 || moreProcess">
          <img src="../../../../static/img/BusinessSub/sjq.png" width="6%" class="sjq" />
          <img src="../../../../static/img/BusinessSub/rl.png" width="4.5%" class="rl" />
          <div class="sjxian"></div>
          {{item.APPROVED_DATE | dateEmpty}}
          <p class="processTitle">{{item.APPROVED_NAME}}</p><p class="processText">{{item.APPROVED_STAFF}}：{{item.APPROVED_INFO}}；</p>
          <hr />
        </div>
        <p class="openProcess" v-if="ApproveList.length > 2">
          <span class="financial-reimbursement-iconfont financial-reimbursement-jiantou8" @click="moreProcess = !moreProcess" :class="{ProcessRotate:!moreProcess}"></span>
        </p>    
        <br />       
    </div>
    <!-- end -->
    <div v-if="PopupVisible3" class="alertBox">
        <chose-alert @closeShade="PopupVisible3 = false" @submitForm="submitForm" :info="{ FINANCEPROINST_ID:$route.query['FINANCEPROINST_ID'],OPERATION_TYPE: $route.query['ACCEPT_TYPE'],passOrRejectType: passOrRejectType,NOWACTDEF_IDS:FinanceProinstList.NOWACTDEF_IDS,USER_ID:PassportList.USER_ID}"></chose-alert>
    </div>
    <div v-if="exhibition_img" class="exhibition-img">
      <img :src="big_img">
      <span class="exhibition-img-close" @click="exhibition_img = !exhibition_img">×</span>
    </div>
  </div>
</template>

<script>
import store from "@/store/store.js";
import myClass from '@/assets/js/common'
import choseAlert from '../../mode/choseAlert';
import { Indicator, Picker, Field, Toast } from "mint-ui";
export default {
  name: "PerProcess",
  data() {
    return {
      exhibition_img: false,
      big_img: '',// 选中展示的图片base64
      ExpenseBill: {},
      FinanceProinstList:{},
      ApproveList:[],
      PassportList:{},
      ImageList:[],
      ExpenseDetail:[],
      spinner: true,
      NextActDefListSlots:[{
        values:[]
      }],
      showNext:false,
      TransferUserListSlots:[{
        values:[]
      }],
      isExamine:false,
      showTrans:false,
      PopupVisible3: false,
      passOrRejectType:'',
      moreProcess:false
    };
  },
  components: { 
      choseAlert
  },
  methods: {
    //详情列表展开
    showTravelDetails(i){
      this.ExpenseDetail[i].show = !this.ExpenseDetail[i].show
    },
     // 放大展示的图片
    exhibitionImgFunc (src) {
      this.exhibition_img = !this.exhibition_img
      this.big_img = src
    },
    passOrReject(type){
      this.passOrRejectType = type
      this.PopupVisible3 = true
    },
    SubmitFinaceInfo(APPROVED_INFO,NextACTDEF_IDS,NextSTAFF_ID,type){
      // type 2000 审核  3000 回退
      // Indicator.open('提交审核中...')
      // console.log(type === 2000)
      // type === 2000 ? Indicator.open('提交审核中...') : Indicator.open('提交回退中...')
      if(APPROVED_INFO === ''){
          this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
          action_type:'SubmitFinaceInfo',
          action_data:store.state.openid,
          FINANCEPROINST_ID:this.$route.query['FINANCEPROINST_ID'],
          FINANCEPROINST_NEXTID:type,
          Handover_UserID:NextSTAFF_ID,
          NOWACTDEF_IDS:this.$route.query['NOWACTDEF_IDS']
          })
          .then(response =>{
              console.log(response)
              if(response.data.ResultObject[0].ResultCode === '100'){
                Indicator.close();
                Toast({
                  message:response.data.ResultObject[0].ResultDesc,
                  duration: 1000
                  });
                this.PopupVisible3 = false;
                this.$router.push({ path: "/Homepage/expenses"});
              }else{
                Indicator.close();
                Toast({
                  message:response.data.ResultObject[0].ResultDesc,
                  duration: 1000
                });
                this.PopupVisible3 = false;
              }
          })
      }else{
          this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
          action_type:'SubmitFinaceInfo',
          action_data:store.state.openid,
          FINANCEPROINST_ID:this.$route.query['FINANCEPROINST_ID'], //
          OPERATION_TYPE:this.$route.query['ACCEPT_TYPE'], //
          FINANCEPROINST_NEXTID:type,//
          APPROVED_INFO:APPROVED_INFO, //
          NextACTDEF_IDS:NextACTDEF_IDS, //
          NextSTAFF_ID:NextSTAFF_ID || '',//
          NOWACTDEF_IDS:this.$route.query['NOWACTDEF_IDS']//
        })
        .then(response => {
            // console.log('SubmitFinaceInfo',response.data.ResultObject[0].ResultCode)
            if(response.data.ResultObject[0].ResultCode === '100'){
              Indicator.close();
              Toast({
                message:response.data.ResultObject[0].ResultDesc,
                duration: 1000
                });
              this.PopupVisible3 = false;
              this.$router.push({ path: "/Homepage/expenses"});
            }else{
              Indicator.close();
              Toast({
                message:response.data.ResultObject[0].ResultDesc,
                duration: 1000
              });
              this.PopupVisible3 = false;
            }
        })
      }
    },
    submitForm(obj){
        // console.log(obj)
        if(obj.type === 2){
          // 同意
          if(obj.next.ActDef_Type === '5010'){
              if(obj.next.ActDef_ID === undefined){
                  Toast('请选择业务转出部门')
              }else{
                Indicator.open('提交审核中...')
                this.SubmitFinaceInfo(obj.sug,obj.next.ActDef_ID,obj.trans.USER_ID,2000)
              }
          }else {
            if(obj.next.ActDef_ID === undefined || obj.trans.USER_ID === undefined){
              obj.next.ActDef_ID === undefined ? Toast('请选择业务转出部门') : Toast('请选择下一步经办人员')
            }else{
              Indicator.open('提交审核中...')
              this.SubmitFinaceInfo(obj.sug,obj.next.ActDef_ID,obj.trans.USER_ID,2000)
            }
          }

        }else if(obj.type === 0){
          // 驳回
          if(obj.next.ActDef_ID === undefined || obj.sug === '' || obj.sug=== undefined){
             obj.next.ActDef_ID === undefined ? Toast('请选择业务转出部门') : Toast('请填写意见')
          }else{
            Indicator.open('提交回退中...')
            this.SubmitFinaceInfo(obj.sug,obj.next.ActInst_ID,obj.trans.USER_ID,3000)
          }
        }else if(obj.type === 3){
          //移交
          if(obj.trans.USER_ID === undefined) {
            Toast('请选择下一步经办人员')
          }else{
            Indicator.open('移交审核中...')
            this.SubmitFinaceInfo('','',obj.trans.USER_ID,4000)
          }
        }
      // console.log(obj.next)
    },
    //加载数据
    getJurisdiction: function() {
    this.$api.post(this.$apiPath.baseURL, this.$apiPath.url,{
        action_type: 'GetExpenseDetail',
        action_data: store.state.openid,
        FINANCEPROINST_ID: this.$route.query['FINANCEPROINST_ID'], //业务内码
        OPERATION_TYPE:this.$route.query['ACCEPT_TYPE'], //业务类型
        FINANCEPROINST_NEXTID: this.$route.query['FINANCEPROINST_NEXTID'] //流程状态
      }).then(response =>{
         //  console.log(response)
         response.data.ExpenseBill ? this.ExpenseBill =  response.data.ExpenseBill[0] : Toast('ExpenseBill-error')
         response.data.FinanceProinstList ? this.FinanceProinstList = response.data.FinanceProinstList[0] : Toast('FinanceProinstList-error')
         response.data.ApproveList ? this.ApproveList = response.data.ApproveList : Toast('ApproveList-error')
         response.data.ExpenseDetail ? this.ExpenseDetail = response.data.ExpenseDetail : Toast('ExpenseDetail-error')
         response.data.PassportList ? this.PassportList= response.data.PassportList[0] : Toast('PassportList-error')
         this.ExpenseDetail.forEach(item =>{
           this.$set(item,'show',false)
          //  item['show'] = false
         })
        //  console.log(this.ExpenseDetail)
        if (response.data.ImageList && response.data.ImageList.length > 0) {
          let arr = response.data.ImageList.map(v => {
            return v.IMAGE_URL.replace(/-/g,'/')
          })
          arr.forEach(v => {
            myClass.getBase64(v).then(res => {
              this.ImageList.push(res)
            })
          })
        }
        // console.log(this.ImageList)
         //this.ImageList = response.data.ImageList
         this.spinner = false
         if(response.data.FinanceProinstList[0].NOWSTAFF_ID === response.data.PassportList[0].USER_ID){
           this.isExamine = true
         }else {this.isExamine = false}
         //console.log('GetExpenseDetail',response)
      })
    },
  },
  created() {
    this.getJurisdiction();
    // console.log(this.$route.params.id);
  },
  watch:{
    exhibition_img(after, before) {
      if(after){
        document.getElementsByTagName("body")[0].style.position = "fixed"
        document.getElementsByTagName("body")[0].style.overflow = "hidden"
      }
      if(before){
        document.getElementsByTagName("body")[0].style.position = "static"
        document.getElementsByTagName("body")[0].style.overflow="auto"
      }
    },
    PopupVisible3(after, before) {
      if(after){
        document.getElementsByTagName("body")[0].style.position = "fixed"
        document.getElementsByTagName("body")[0].style.overflow = "hidden"
      }
      if(before){
        document.getElementsByTagName("body")[0].style.position = "static"
        document.getElementsByTagName("body")[0].style.overflow="auto"
      }
    }
  }
};
</script>

<style scoped>
.isOpen {
  animation: isOpen 0.2s linear forwards
}
.isClose {
  animation: isClose 0.2s linear forwards
}
.rotate {
  transform: rotate(180deg);
}
@keyframes isOpen
{
from {height: 1.25rem;}
to {height: 23.1rem;}
}
@keyframes isClose
{
from {height: 23.1rem;}
to {height: 1.25rem;}
}
</style>


